<template>
  <view class="container">
    <!-- Breadcrumb Navigation -->
    <view class="breadcrumb">
      <text>订单列表 / 订单详情</text>
    </view>

    <!-- Order Status -->
    <view class="order-status">
      <view class="status-step">
        <text class="status-icon">✔</text>
        <text class="status-text">已下单</text>
        <text class="status-date">2024-03-08 09:10:54</text>
      </view>
      <view class="status-step">
        <text class="status-icon">✔</text>
        <text class="status-text">已付款</text>
        <text class="status-date">2024-03-08 09:11:08</text>
      </view>
      <view class="status-step">
        <text class="status-icon">✘</text>
        <text class="status-text">已取消</text>
        <text class="status-date">2024-03-08 09:54:05</text>
      </view>
    </view>

    <!-- Segmented Control -->
    <view class="segmented-control">
      <uni-segmented-control
        :current="currentTab"
        :values="['订单信息', '表单信息', '分销信息', '赠品信息']"
        @clickItem="onTabChange"
      />
    </view>

    <!-- Tab Content -->
    <view class="tab-content">
      <view v-if="currentTab === 0" class="order-info content-box">
        <!-- Order Info -->
        <view class="section">
          <text class="section-title">订单信息</text>
          <view class="info-grid">
            <view class="info-row">
              <text class="info-label">订单号：</text>
              <text class="info-value">2024030809105406024</text>
            </view>
            <view class="info-row">
              <text class="info-label">商户单号：</text>
              <text class="info-value">HM4540f5c08eda3c4ffc5383d257fb5f</text>
            </view>
            <view class="info-row">
              <text class="info-label">支付方式：</text>
              <text class="info-value">微信支付</text>
            </view>
            <view class="info-row">
              <text class="info-label">订单来源：</text>
              <text class="info-value">商城</text>
            </view>
            <view class="info-row">
              <text class="info-label">订单所属平台：</text>
              <text class="info-value">微信小程序</text>
            </view>
            <view class="info-row">
              <text class="info-label">退款说明：</text>
              <text class="info-value">售后退款0.10元</text>
            </view>
          </view>
        </view>
        <!-- Receiver Info -->
        <view class="section">
          <text class="section-title">收货信息</text>
          <view class="info-grid">
            <view class="info-row">
              <text class="info-label">用户：</text>
              <text class="info-value">阿泰-微信传媒</text>
            </view>
            <view class="info-row">
              <text class="info-label">收货人：</text>
              <text class="info-value">龚藜</text>
            </view>
            <view class="info-row">
              <text class="info-label">电话：</text>
              <text class="info-value">18388330635</text>
            </view>
            <view class="info-row">
              <text class="info-label">收货地址：</text>
              <text class="info-value">云南省 曲靖市 麒麟区 龙潭新村9栋16号</text>
            </view>
            <view class="info-row">
              <text class="info-label">配送方式：</text>
              <text class="info-value">快递发送</text>
            </view>
          </view>
        </view>
        <!-- Product Info -->
        <view class="section">
          <text class="section-title">商品信息</text>
          <view class="product-info">
            <view class="product-item">
              <image class="product-image" src="@/static/uni.png" />
              <view class="product-details">
                <text class="product-title">恒丝云南特产曲靖特产丝棉糖解腻陪伴伴手礼无蔗糖低糖低热量丝棉块</text>
                <view class="product-spec">
                  <text>口味:玫瑰丝（2斤装）</text>
                </view>
                <view class="product-status">
                  <text>已结束</text>
                </view>
              </view>
            </view>
            <view class="product-summary">
              <text>售价：¥0.10</text>
              <text>数量：1</text>
              <text>商品小计：¥0.10</text>
              <text>优惠后：¥0.10</text>
            </view>
          </view>
        </view>
      </view>
      <view v-if="currentTab === 1" class="form-info content-box">
        <!-- Form Info -->
        <text class="section-title">表单信息</text>
        <!-- Add form details here -->
      </view>
      <view v-if="currentTab === 2" class="distribution-info content-box">
        <!-- Distribution Info -->
        <text class="section-title">分销信息</text>
        <!-- Add distribution details here -->
      </view>
      <view v-if="currentTab === 3" class="gift-info content-box">
        <!-- Gift Info -->
        <text class="section-title">赠品信息</text>
        <!-- Add gift details here -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0,
    };
  },
  methods: {
    onTabChange(e) {
      this.currentTab = e.currentIndex;
    },
  },
};
</script>

<style scoped>
.container {
  padding: 10px;
  background-color: #f5f5f5;
}
.breadcrumb {
  margin-bottom: 10px;
}
.order-status {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #e0e0e0;
}
.status-step {
  text-align: center;
}
.status-icon {
  font-size: 24px;
  color: #06c;
}
.status-text {
  font-size: 16px;
  margin-top: 5px;
}
.status-date {
  font-size: 14px;
  color: #888;
  margin-top: 5px;
}
.segmented-control {
  margin-bottom: 20px;
}
.tab-content {
  margin-top: 20px;
}
.section {
  margin-bottom: 20px;
}
.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #e0e0e0;
}
.info-row {
  display: flex;
  justify-content: space-between;
}
.info-label {
  font-weight: bold;
}
.info-value {
  color: #333;
}
.product-info {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #e0e0e0;
}
.product-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.product-image {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}
.product-details {
  flex: 1;
}
.product-title {
  font-size: 16px;
  margin-bottom: 5px;
}
.product-spec {
  font-size: 14px;
  color: #888;
  margin-bottom: 5px;
}
.product-status {
  font-size: 14px;
  color: red;
}
.product-summary {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  border-top: 1px solid #eee;
  padding-top: 10px;
  margin-top: 10px;
}
.content-box {
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #e0e0e0;
}
</style>
